
15.05.2016, 18:27
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
AJAX переходы по страницам
Добрый день.
Сделал AJAX навигацию, при переходе по ссылкам меняется только контентная часть. Все было сделано для того, чтобы не перегружался плеер, работающий на сайте.
Работает все этим скриптом:
$(document).ready(function() {
$('a.menuside').click(function(m) {
m.preventDefault();
var action = $(this).data('action');
var murl = $(this).data('murl');
var mid = $(this).data('mid');
var mtpl = $(this).data('mtpl');
$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
$('#wrapcontent').fadeOut(300, function() {
history.pushState(null, null, murl);
$(this).html(data).fadeIn(800);
});
});
})
});
Но проблема во в чем, если я перехожу с меню со страницы site.ru на страницу site.ru/razdel - все работает как надо.
Если же я сразу же пытаюсь перейти со страницы site.ru/razdel на страницу site.ru/razdel/razdel - то происходит просто переход по ссылке, а, значит, обновление страницы.
Но если после первого перехода обновить страницу (site.ru/razdel) и кликнуть по ссылке перехода на site.ru/razdel/razdel - то все работает как положено. Почему не работает 2 перехода по очереди?
|
|

20.05.2016, 11:38
|
Аспирант
|
|
Регистрация: 22.08.2015
Сообщений: 71
|
|
Batyabest,
(function() {
$('a.menuside').on('click', function(m) {
m.preventDefault();
var action = $(this).data('action');
var murl = $(this).data('murl');
var mid = $(this).data('mid');
var mtpl = $(this).data('mtpl');
$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
$('#wrapcontent').fadeOut(300, function() {
history.pushState(null, null, murl);
$(this).html(data).fadeIn(800);
});
});
})
})();
|
|

27.05.2016, 15:48
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
Спасибо, попробую, отпишусь!
|
|

30.05.2016, 10:49
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
Сообщение от Alex_63
|
Batyabest,
(function() {
$('a.menuside').on('click', function(m) {
m.preventDefault();
var action = $(this).data('action');
var murl = $(this).data('murl');
var mid = $(this).data('mid');
var mtpl = $(this).data('mtpl');
$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
$('#wrapcontent').fadeOut(300, function() {
history.pushState(null, null, murl);
$(this).html(data).fadeIn(800);
});
});
})
})();
|
Не работает. Пытался даже разными скриптами осуществлять работу.
1. Ссылка с меню в боковом меню - переход работает как положено, через ajax. Здесь работает этот скрипт:
$(document).ready(function() {
$('a.menuside').click(function(m) {
m.preventDefault();
var action = $(this).data('action');
var murl = $(this).data('murl');
var mid = $(this).data('mid');
var mtpl = $(this).data('mtpl');
$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
$('#wrapcontent').fadeOut(300, function() {
history.pushState(null, null, murl);
$(this).html(data).fadeIn(800);
});
});
})
});
После перехода в контентной части сайта появляются нужные нам блоки, со ссылками, а адрес в строке браузера подменяется путем
history.pushState(null, null, murl);
И тут уже при переходе по ссылке из контентной части сайта (не из бокового меню), переход по ajax не работает, происходит обычный переход по ссылке, с перезагрузкой страницы.
Здесь работать должен этот скрипт:
$(document).ready(function() {
$('a.playlist').click(function(m) {
m.preventDefault();
var action = $(this).data('action');
var murl = $(this).data('murl');
var mid = $(this).data('mid');
$.post(document.location.href, {action:action,mid:mid}, function(data) {
$('#wrapcontent').fadeOut(300, function() {
history.pushState(null, null, murl);
$(this).html(data).fadeIn(800);
});
});
})
});
Они идентичны, за исключением класса ссылки.
Обратный же переход по ссылкам из бокового меню работает как надо.
Скажите, где что неправильно написано?
|
|

30.05.2016, 19:11
|
Аспирант
|
|
Регистрация: 22.08.2015
Сообщений: 71
|
|
Batyabest,
А так ?
$('a.menuside,a.playlist').on('click', function(m) {
m.preventDefault();
var action = $(this).data('action'),
mid = $(this).data('mid'),
mtpl = $(this).data('mtpl');
var obj = {action:action,mid:mid};
if (mtpl) { obj['mtpl'] = mtpl; }
$.post(document.location.href, obj, function(data) {
$('#wrapcontent').fadeOut(300, function() {
history.pushState(null, null, murl);
$(this).html(data).fadeIn(800);
});
});
})
|
|

01.06.2016, 01:25
|
 |
Аспирант
|
|
Регистрация: 01.06.2016
Сообщений: 87
|
|
После обновления контент части надо обработчики на a.playlist по новой повесить
|
|

01.06.2016, 11:14
|
Аспирант
|
|
Регистрация: 22.08.2015
Сообщений: 71
|
|
Botik21,
Насколь я помню, метод on в jQuery вешает обработчики не ток на те элементы, которые уже есть на момент срабатывания скрипта, но и на те, которые появляются после ...
http://jquery.page2page.ru/index.php5/On
|
|

01.06.2016, 11:29
|
 |
Аспирант
|
|
Регистрация: 01.06.2016
Сообщений: 87
|
|
Да, вы правы.
|
|

01.06.2016, 21:59
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
Как же тогда мне поправить скрипт, чтобы обработчики навешивались?
|
|

02.06.2016, 08:54
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
Alex_63, Botik21, Rise,
Вот сайт http://rock33.ru/
При включении музыки на главной из списка треков снизу - все работает как положено.
При переходе в пункт меню "Музыка" - плеер работает нормально.
Проблема была в том, чтобы перейти уже в какой-то раздел, например, "Поп"
Это я решил таким путем:
В конце скрипта
$('head').append("<script src='/assets/theme/js/script.js'></script>");
Но чувствую, что это сильно костыльное решение, потому что в итоге этот скрипт грузится на странице 2 раза. Как сделать все по фен-шую?
Но вот уже со следующей проблемой я таким образом справится не смог.
Дело в том, что если мы таким образом переходим в раздел "Поп" и там пытаемся запустить музыку, то она открывается не в плеере, а в новом окне.
В консоли путем команды getEventListeners($0) Видим, что нет объекта.
http://prntscr.com/bbazbx
Если же обновить станицу, то по той же команде видим объект
http://prntscr.com/bbaz6r
И по клику музыка открывается в плеере как положено.
Почему так происходит не могу понять, подскажите, люди добрые)))
|
|
|
|